<template>
  <div>
    <router-link to="/home">Home</router-link> |
    <router-link to="/example/ExampleList1">ExampleList1</router-link> |
    <router-link to="/example/ExampleList2">ExampleList2</router-link> |
    <router-link to="/example/ExampleList3">ExampleList3</router-link> |
    <router-link to="/example/ExampleList4">ExampleList4</router-link>
    <component :is="currentLayout"></component>
  </div>
</template>

<script>
import LayoutNone from '/@/layout/LayoutNone.vue'
import LayoutBase from '/@/layout/LayoutBase.vue'
import Layout1 from '/@/layout/Layout1.vue'
import Layout2 from '/@/layout/Layout2.vue'

export default {
  name: 'App',
  components: {
    LayoutNone,
    LayoutBase,
    Layout1,
    Layout2,
  },
  computed: {
    // 使用何种布局方式
    currentLayout () {
      return this.$route.meta.layout || 'LayoutNone';
    }
  }
}
</script>
